<template>
  <div class="app">
    <h2>App组件：{{ reactiveInfo }}</h2>
  </div>
</template>

<script>
/*
isProxy、isReactive、isRef、isReadonly、shallowReactive、shallowReadonly、toRaw、reactive、readonly、ref、shallowRef函数
1. isProxy():
  检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

2. isReactive()
  检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理

3. isReadonly()
  检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。
  通过 readonly() 和 shallowReadonly() 创建的代理都是只读的，因为他们是没有 set 函数的 computed() ref

4. isRef()
  检查某个值是否为 ref。

5. shallowReactive()
  reactive() 的浅层作用形式
详细信息:
  和 reactive() 不同，这里没有深层级的转换：一个浅层响应式对象里只有根级别的属性是响应式的。属性的值会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了

6. shallowReadonly()
  readonly() 的浅层作用形式
详细信息:
  和 readonly() 不同，这里没有深层级的转换：只有根层级的属性变为了只读。属性的值都会被原样存储和暴露，这也意味着值为 ref 的属性不会被自动解包了

7. toRaw()
  根据一个 Vue 创建的代理返回其原始对象。
详细信息:
  toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。
  这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用


8. reactive()
  返回一个对象的响应式代理
详细信息:
  响应式转换是“深层”的：它会影响到所有嵌套的属性。一个响应式对象也将深层地解包任何 ref 属性，同时保持响应性。

9. readonly()
  接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理。
详细信息:
   只读代理是深层的：对任何嵌套属性的访问都将是只读的。它的 ref 解包行为与 reactive() 相同，但解包得到的值是只读的


10. ref()
  接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。
详细信息:
    ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用

11. shallowRef()
  ref() 的浅层作用形式。
详细信息
  和 ref() 不同，浅层 ref 的内部值将会原样存储和暴露，并且不会被深层递归地转为响应式。只有对 .value 的访问是响应式的。
  shallowRef() 常常用于对大型数据结构的性能优化或是与外部的状态管理系统集成。
*/

import {isProxy, isReactive, isReadonly, isRef, shallowReactive, shallowRef, shallowReadonly, toRaw, reactive, readonly, ref} from "vue";

export default {
  name: 'App',
  setup(props, context) {

    const reactiveInfo = reactive({
      name: "陶品奇",
      age: 22,
      address: "衡阳"
    })
    const shallowReactiveInfo = shallowReactive({
      name: "TAOPINQI",
      age: 22,
      children: {
        name: "taopinqi",
        age: 21,
      }
    })

    const message = ref("HelloVue3")
    const shallowRefInfo = shallowRef({
      name: "TAOPINQI",
      age: 22,
      children: {
        name: "taopinqi",
        age: 21,
      }
    })

    const readonlyInfo = readonly(reactiveInfo)
    const shallowReadonlyInfo = shallowReadonly(reactiveInfo)

    //reactive判断相关的API
    console.log(isProxy(reactiveInfo))
    console.log(isReactive(reactiveInfo))
    console.log(isReadonly(readonlyInfo))
    console.log(isRef(message))
    console.log(toRaw(reactiveInfo))

    return {
      reactiveInfo,
      readonlyInfo,
      shallowReadonlyInfo,
      shallowReactiveInfo,
      shallowRefInfo
    }
  },
}
</script>

<style lang="less"></style>
